<template>
  <el-form ref="formRef" :model="form" label-width="auto" class="form-container" :rules="rules" size="default">
    <el-form-item label="客户姓名" prop="customerId" required>
      <el-select v-model="form.customerId" filterable clearable placeholder="请选择客户" style="width: 100%"
                 :loading="loading">
        <el-option v-for="customer in customerAllName" :key="customer.customerId" :label="customer.customerName"
                   :value="customer.customerId" />
        <template #empty>
          <el-empty description="暂无客户数据" v-if="!loading" />
        </template>
      </el-select>
    </el-form-item>

    <el-form-item label="外出事由" prop="outgoingreason" required>
      <el-input v-model="form.outgoingreason" />
    </el-form-item>
    <el-form-item label="外出时间" prop="outgoingtime" required>
      <!-- <el-input v-model="form.outgoingtime" /> -->
      <div class="block">
        <el-date-picker v-model="form.outgoingtime" type="datetime" placeholder="请选择外出时间" style="width: 200px"
                        value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
      </div>
    </el-form-item>
    <el-form-item label="预计回院时间" prop="expectedreturntime" equired>
      <!-- <el-input v-model="form.expectedreturntime" /> -->
      <div class="block">
        <el-date-picker v-model="form.expectedreturntime" type="datetime" placeholder="请选择回院时间"
                        style="width: 200px" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
      </div>
    </el-form-item>
    <el-form-item label="陪同人姓名">
      <el-input v-model="form.escorted" />
    </el-form-item>
    <el-form-item label="陪同人关系">
      <el-input v-model="form.relation" />
    </el-form-item>
    <el-form-item label="陪同人电话">
      <el-input v-model="form.escortedtel" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="cancleEdit">取消</el-button>
    </el-form-item>
  </el-form>

</template>

<script setup name='edit'>
import { ref } from "vue";
import { saveOrUpdate, getCustomersName, getById } from "@/api/customer/outward/index.js";
import { ElMessageBox, ElNotification } from 'element-plus'
import { onMounted } from "vue";

// 表单信息
const form = ref({
  customerId: '',
  customerName: '',
  outgoingreason: '',
  outgoingtime: '',
  expectedreturntime: '',
  escorted: '',
  relation: '',
  escortedtel: '',
})

// 代表父组件传过来的closeEdit函数
const { closeEdit, editId } = defineProps(['closeEdit', 'editId'])

const loading = ref(false)
// 创建引用 用于表单必选项验证
const formRef = ref()
// 用于添加客户外出的姓名下拉选
const customerAllName = ref();

// 获取没有喜好记录的客户列表
async function customerNameList() {
  loading.value = true
  try {
    // 修改为调用没有喜好记录的接口
    const response = await getCustomersName()
    // response 在utils/request.js 中已经被解构 不需要使用response.data
    customerAllName.value = response

    console.log("customerAllName:", customerAllName.value);
  } catch (e) {
    console.error("查询失败:", e)
  } finally {
    loading.value = false
  }
}

// 表单验证必选项规则
const onSubmit = () => {
  // Element Plus 表单组件的一个方法调用，用于触发表单验证
  formRef.value.validate((valid) => {
    if (valid) {
      // 验证通过，执行保存操作(最基础的保存操作)
      saveOrUpdate(form.value).then(success => {
        ElNotification({
          title: '消息',
          type: 'success',
          message: "保存成功",
        })
        closeEdit(true);
      })
      customerNameList();
    } else {
      // 验证失败，显示错误提示
      ElNotification({
        title: '错误',
        type: 'error',
        message: error.message || '请填写所有必填项',
      })
      return false
    }
  })
}
// 点击取消按钮
const cancleEdit = () => {
  closeEdit(false);
}

// 当修改操作的到时候 根据主键查询 通过调用getById函数来获取指定editId的用户数据 并将相关数据填充到表单中
const pageGetById = async () => {
  try {
    // 异步调用getById函数获取用户数据
    const user = await getById(editId);
    if (user) {
      form.value = user;
      // console.log(user);
      // form.username = user.username;
      // form.password = user.password;
      // form.nickname = user.nickname;
    } else {
      console.warn("未找到id");
    }
  } catch (error) {
    console.error("获取数据失败:", error);
  }
}

// 表单验证规则 必选项
const rules = {
  customerName: [{ required: true, message: '请输入客户姓名', trigger: 'blur' },],
  outgoingreason: [{ required: true, message: '请输入外出事由', trigger: 'blur' },],
  outgoingtime: [{ required: true, message: '请输入外出时间', trigger: 'change' },],
  expectedreturntime: [{ required: true, message: '请输入预计回院时间', trigger: 'change' },]
}

onMounted(() => {
  customerNameList();
  // 如果获取到editId，则代表修改用户信息
  if (editId) {
    pageGetById()
  }
})
</script>

<style scoped>
.form-container {
  width: 300px;
  /* 如果允许换行，那么换行后，多行元素中的每一行也会垂直居中 */
  justify-content: center;
  /* 垂直居中对齐 */
  align-items: center;
  padding-left: 25px;
}
</style>